<template>
  <view class="fu-comment-list">
    <!-- 评论列表 -->
    <view 
      v-for="(item, index) in comments" 
      :key="item.id"
      class="fu-comment"
    >
      <!-- 用户信息 -->
      <view class="fu-comment__user">
        <image class="fu-comment__avatar" :src="item.avatar" mode="aspectFill" />
        <view class="fu-comment__info">
          <text class="fu-comment__name">{{ item.userName }}</text>
          <view class="fu-comment__meta">
            <fu-rate :value="item.rate" :size="24" readonly />
            <text class="fu-comment__time">{{ item.time }}</text>
          </view>
        </view>
      </view>
      
      <!-- 评论内容 -->
      <view class="fu-comment__content">
        <text class="fu-comment__text">{{ item.content }}</text>
        <!-- 图片列表 -->
        <view v-if="item.images && item.images.length" class="fu-comment__images">
          <image 
            v-for="(img, imgIndex) in item.images" 
            :key="imgIndex"
            class="fu-comment__image"
            :src="img"
            mode="aspectFill"
            @tap="onImageClick(item.images, imgIndex)"
          />
        </view>
      </view>
      
      <!-- 商品信息 -->
      <view v-if="item.goods" class="fu-comment__goods">
        <text class="fu-comment__goods-text">{{ item.goods }}</text>
      </view>
      
      <!-- 商家回复 -->
      <view v-if="item.reply" class="fu-comment__reply">
        <text class="fu-comment__reply-label">商家回复：</text>
        <text class="fu-comment__reply-text">{{ item.reply }}</text>
      </view>
      
      <!-- 操作区域 -->
      <view class="fu-comment__actions">
        <view 
          class="fu-comment__action"
          :class="{ 'is-active': item.isLiked }"
          @tap="onLikeClick(index)"
        >
          <fu-icon :name="item.isLiked ? 'like-fill' : 'like'" size="32" />
          <text class="fu-comment__action-text">{{ item.likes || '点赞' }}</text>
        </view>
      </view>
    </view>
    
    <!-- 加载更多 -->
    <fu-load-more :status="loadMoreStatus" />
  </view>
</template>

<script>
/**
 * @description 评论列表组件
 * @property {Array} comments 评论数据
 * @property {String} loadMoreStatus 加载更多状态
 * @event {Function} like-click 点赞点击事件
 * @event {Function} image-click 图片点击事件
 */
export default {
  name: 'FuCommentList',
  
  props: {
    // 评论数据
    comments: {
      type: Array,
      default: () => []
    },
    // 加载更多状态
    loadMoreStatus: {
      type: String,
      default: 'more'
    }
  },
  
  methods: {
    // 点赞点击
    onLikeClick(index) {
      this.$emit('like-click', {
        index,
        item: this.comments[index]
      })
    },
    
    // 图片点击
    onImageClick(images, index) {
      this.$emit('image-click', {
        images,
        index
      })
      
      // 预览图片
      uni.previewImage({
        urls: images,
        current: index
      })
    }
  }
}
</script>

<style lang="scss">
.fu-comment-list {
  background-color: #fff;
}

.fu-comment {
  padding: 30rpx;
  border-bottom: 1px solid #f5f5f5;
  
  &__user {
    display: flex;
    align-items: center;
  }
  
  &__avatar {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    margin-right: 20rpx;
    background-color: #f5f5f5;
  }
  
  &__info {
    flex: 1;
  }
  
  &__name {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 8rpx;
  }
  
  &__meta {
    display: flex;
    align-items: center;
    gap: 20rpx;
  }
  
  &__time {
    font-size: 24rpx;
    color: #999;
  }
  
  &__content {
    margin-top: 20rpx;
  }
  
  &__text {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
  }
  
  &__images {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx;
    margin-top: 20rpx;
  }
  
  &__image {
    width: 220rpx;
    height: 220rpx;
    border-radius: 12rpx;
    background-color: #f5f5f5;
  }
  
  &__goods {
    margin-top: 20rpx;
    padding: 20rpx;
    background-color: #f8f8f8;
    border-radius: 8rpx;
  }
  
  &__goods-text {
    font-size: 24rpx;
    color: #666;
  }
  
  &__reply {
    margin-top: 20rpx;
    padding: 20rpx;
    background-color: #f8f8f8;
    border-radius: 8rpx;
  }
  
  &__reply-label {
    font-size: 24rpx;
    color: #ff4444;
    font-weight: 500;
  }
  
  &__reply-text {
    font-size: 24rpx;
    color: #666;
  }
  
  &__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20rpx;
  }
  
  &__action {
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 12rpx 20rpx;
    border-radius: 30rpx;
    background-color: #f8f8f8;
    transition: all 0.2s;
    
    &.is-active {
      color: #ff4444;
    }
    
    &:active {
      opacity: 0.7;
    }
  }
  
  &__action-text {
    font-size: 24rpx;
    color: inherit;
  }
}
</style> 